<template>
  <div class="detailPage pd-20 mg-10">
    <div class="backBtn">
      <Back width="18px" hight="18px" />
      <ElButton class="btn" @click="handleBack()">返回</ElButton>
    </div>
    <ElTabs v-model="activeName" class="detail-text">
      <ElTabPane label="警情任务详情" name="first">
        <p class="title">警情信息</p>
        <ElRow>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>警情名称：</span>
              <span class="text">{{ record.policeWarningName }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>重要等级：</span>
              <span class="text">{{ record.level }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>任务状态：</span>
              <span class="text">{{ record.state }}</span>
            </div>
          </ElCol>

          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>归属组织：</span>
              <span class="text">{{ record.organizationName }}</span>
            </div>
          </ElCol>

          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>执行飞手/机场：</span>
              <span class="text">{{ record.taskExecuteFeisouOrDrone }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>创建时间：</span>
              <span class="text">{{ record.createTime }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>执行开始时间：</span>
              <span class="text">{{ record.startTime }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>执行结束时间：</span>
              <span class="text">{{ record.endTime }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>警情简介：</span>
              <span class="text">{{ record.policeWarningIntroduce }}</span>
            </div>
          </ElCol>
          <ElCol :span="24">
            <div style="display: flex">
              <span>警情位置：</span>
              <div>
                <span style="color: #1989fa"
                  >{{ record.address }} {{ record.longitude }},{{
                    record.latitude
                  }}</span
                >
                <img src="../../../../assets/u4660.png" alt="" />
              </div>
            </div>
          </ElCol>
        </ElRow>
        <p class="title">任务执行情况</p>
        <ElRow>
          <ElCol :xs="24">
            <div
              style="
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
              "
            >
              <span>任务进度：</span>
              <div class="timelineProcessBox">
                <el-steps align-center>
                  <el-step
                    :icon="activity.done ? 'CircleCheck' : 'Warning'"
                    v-for="(activity, index) in activities"
                    :key="index"
                    :status="activity.done ? 'success' : 'wait'"
                  >
                    <template #title>
                      <span>
                        {{ activity.time }}
                      </span>
                      <p>
                        {{ activity.content }}
                      </p>
                    </template>
                  </el-step>
                </el-steps>
              </div>
            </div>
          </ElCol>
          <ElCol :xs="24">
            <div
              style="
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
              "
            >
              <span>航线地图：</span>
              <mapPosition
                style="width: 600px; height: 300px"
                :showSearch="showSearch"
                :defaultAddress="defaultAddress"
                :defaultPoint="defaultPoint"
                @getPosition="getPosition"
              />
            </div>
          </ElCol>
          <ElCol :xs="24">
            <div
              style="
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
              "
            >
              <span>任务图片：</span>
              <div>
                <ElButton class="bluebg-btn" :icon="Download"
                  >打包下载</ElButton
                >
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-start;
                  "
                >
                  <div
                    style="
                      display: flex;
                      align-items: flex-start;
                      justify-content: flex-start;
                      font-size: 12px;
                      color: #606266;
                    "
                  >
                    <div class="img-text">
                      <img src="../../../../assets/u4660.png" alt="" />
                      <div style="margin: 10px">
                        <div
                          style="display: flex; justify-content: space-between"
                        >
                          <span style="line-height: 14px"
                            >2025-03-22 15:30:23</span
                          >
                          <span style="line-height: 14px">人员聚集</span>
                        </div>
                        <div
                          style="display: flex; justify-content: space-between"
                        >
                          <span style="line-height: 14px">地址</span>
                          <span style="line-height: 14px"
                            >路北区建国路新华广场1号出入口</span
                          >
                        </div>
                        <div
                          style="display: flex; justify-content: space-between"
                        >
                          <span>坐标</span>
                          <span>118.302553，40.455888</span>
                        </div>
                      </div>
                    </div>
                    <div class="img-text">
                      <img src="../../../../assets/u4660.png" alt="" />
                      <div style="margin: 10px">
                        <div
                          style="display: flex; justify-content: space-between"
                        >
                          <span style="line-height: 14px"
                            >2025-03-22 15:30:23</span
                          >
                          <span style="line-height: 14px">人员聚集</span>
                        </div>
                        <div
                          style="display: flex; justify-content: space-between"
                        >
                          <span style="line-height: 14px">地址</span>
                          <span style="line-height: 14px"
                            >路北区建国路新华广场1号出入口</span
                          >
                        </div>
                        <div
                          style="display: flex; justify-content: space-between"
                        >
                          <span>坐标</span>
                          <span>118.302553，40.455888</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </ElCol>
        </ElRow>
      </ElTabPane>
    </ElTabs>
  </div>
</template>

<script lang="ts" setup>
import {
  ElButton,
  ElTabs,
  ElTabPane,
  ElRow,
  ElCol,
  ElTimeline,
  ElTimelineItem,
  ElSteps,
  ElStep,
} from 'element-plus';
import { reactive, ref, onMounted } from 'vue';
import { router } from '#/router';
import mapPosition from './map.vue';
import { CircleCheck, Warning, Download } from '@element-plus/icons-vue';
import { getPoliceWarningsDetails } from '#/api/task/policeTask';
const activeName = ref('first');
const showSearch = ref(false);
const activities = ref([
  {
    content: '任务下发',
    time: '15:00',
    done: true,
  },
  {
    content: '系统检测',
    time: '15:01',
    done: true,
  },
  {
    content: '无人机起飞',
    time: '15:03',
    done: true,
  },
  {
    content: '到达航点1',
    time: '15:05',
    done: true,
  },
  {
    content: '到达航点2',
    time: '15:06',
    done: true,
  },
  {
    content: '到达航点3',
    time: '15:09',
    done: true,
  },
  {
    content: '到达航点4',
    time: '15:15',
    done: true,
  },
  {
    content: '到达航点5',
    time: '15:15',
    done: false,
  },
  {
    content: '无人机回航',
    time: '15:15',
    done: false,
  },
  {
    content: '无人机降落',
    time: '15:18',
    done: false,
  },
]);
const record = reactive({
  createTime: '',
  endTime: '',
  level: '',
  organizationName: '',
  policeWarningIntroduce: '',
  policeWarningName: '',
  startTime: '',
  state: '',
  taskExecuteFeisouOrDrone: '',
  taskExecuteSituation: [],
});
const handleBack = () => {
  router.go(-1);
};

const getDetail = async () => {
  const params = {
    id: router.currentRoute.value.query.id,
  };
  const { data } = await getPoliceWarningsDetails(params);
  record.createTime = data.createTime;
  record.endTime = data.endTime;
  record.level = data.level;
  record.organizationName = data.organizationName;
  record.policeWarningIntroduce = data.policeWarningIntroduce;
  record.policeWarningName = data.policeWarningName;
  record.startTime = data.startTime;
  record.state = data.state;
  record.taskExecuteFeisouOrDrone = data.taskExecuteFeisouOrDrone;
  record.taskExecuteSituation = data.taskExecuteSituation;
};

onMounted(() => {
  getDetail();
});
</script>

<style scoped lang="scss">
.el-col {
  margin-bottom: 20px;
}

.timelineProcessBox {
  width: 90%;

  :deep(.el-step__title) {
    line-height: 25px;
  }

  :deep(.el-step__line) {
    background-color: #c0c4cc;
  }

  span,
  p {
    font-size: 14px;
    font-weight: normal;
    color: #909399;
  }

  p {
    color: #303133;
  }
}

.img-text {
  box-sizing: border-box;
  margin: 10px 10px 0 0;
  border: 1px solid #ebeef5;
  border-radius: 4px;

  img {
    width: 330px;
    height: 210px;
  }
}
</style>
